<template>
  <div class="machineAdjustment">
    <DFPageList ref="dfPageListRef" :pageOptions="pageOptions">
      <template #machineAdjustmentJson>
        <json-editor-vue
          class="editor"
          v-model="machineAdjustmentJson"
          currentMode="code"
          :onChange="handleJsonChange(machineAdjustmentJson)"
        />
      </template>
    </DFPageList>
  </div>
</template>

<script lang="ts" setup name="MachineAdjustment">
  import lang from './lang';
  import { useMixins } from '@/hooks/useMixins';
  import {
    pageMachineAdjustment,
    addMachineAdjustment,
    updateMachineAdjustment,
    delMachineAdjustment,
  } from '@/api/gather/machineAdjustment';
  import { listMachine } from '@/api/base/machine';
  import JsonEditorVue from 'json-editor-vue3';
  const { loadLangFn, t } = useMixins();
  loadLangFn(lang);

  const machineAdjustmentJson = ref();

  const dfPageListRef: any = ref(null);

  const machineList = ref([]);

  const handleJsonChange = (e) => {
    dfPageListRef.value.setFieldsValueFn({ machineAdjustmentJson: e });
    if (e && Object.keys(e).length !== 0) {
      dfPageListRef.value?.validate(['machineAdjustmentJson']);
    }
  };

  const pageOptions = {
    searchForm: {
      formSchemas: [
        {
          width: 170,
          label: 'machineAdjustmentName',
          prop: 'machineAdjustment',
        },
        {
          label: 'machineName',
          prop: 'machineCode',
          component: 'NSelect',
          options: machineList,
        },
      ],
    },
    table: {
      columns: [
        {
          width: 170,
          label: 'machineAdjustmentName',
        },
        {
          width: 170,
          label: 'machineAdjustmentCode',
        },
        {
          width: 170,
          label: 'machineName',
          render: (row) => {
            return h('span', {
              innerText: row.machineCode
                ? machineList.value.find((item) => item.value === row.machineCode).label
                : '-',
            });
          },
        },
        {
          width: 170,
          label: 'remark',
          common: true,
        },
      ],
      action: {
        columns: [
          {
            label: 'check',
          },
          {
            label: 'edit',
          },
          {
            label: 'copy',
          },
          {
            label: 'delete',
          },
        ],
      },
      operaColumn: [
        {
          label: 'add',
        },
      ],
      requestFn: pageMachineAdjustment,
      delRequestFn: delMachineAdjustment,
    },
    modalFormDialog: {
      formSchemas: [
        {
          label: 'machineAdjustmentName',
          required: true,
          giProps: { span: 4 },
          span: 3,
        },
        {
          label: 'machineAdjustmentCode',
          required: true,
          giProps: { span: 4 },
          span: 3,
          editDialogDisabled: true,
        },
        {
          label: 'machineName',
          prop: 'machineCode',
          component: 'NSelect',
          options: machineList,
          required: true,
          giProps: { span: 4 },
          span: 3,
        },
        {
          label: 'machineAdjustmentJson',
          slot: 'machineAdjustmentJson',
          maxlength: '999999999',
          required: true,
          giProps: { span: 4 },
          span: 3,
          rules: [
            {
              required: true,
              key: 'machineAdjustmentJson',
              validator(_rule, value: string) {
                if (!value || Object.keys(value).length === 0) {
                  return new Error(t('common.formTipMsg.input'));
                }
              },
              trigger: ['blur', 'change'],
            },
          ],
        },
        {
          label: 'remark',
          common: true,
          type: 'textarea',
          giProps: { span: 4 },
          span: 3,
        },
      ],
      cols: 2,
      addDataFn: addMachineAdjustment,
      updateDataFn: updateMachineAdjustment,
      afterDialogSubmitFn: initDictData,
      setDialogDataFn: async (data, type) => {
        if (type === 'add') {
          machineAdjustmentJson.value = {};

          return data;
        }

        if (type === 'copy') {
          delete data.id;
        }

        if (data && data.machineAdjustmentJson)
          machineAdjustmentJson.value = JSON.parse(data.machineAdjustmentJson);

        return data;
      },
      setDialogSubmitDataFn: (data) => {
        data.machineAdjustmentJson = JSON.stringify(machineAdjustmentJson.value) || null;
        return data;
      },
    },
  };

  async function initDictData() {
    const res = await Promise.all([listMachine()]);
    const [list1] = res;

    machineList.value =
      list1?.data.map((item) => ({
        label: item.machineName + `(${item.machineCode})`,
        value: item.machineCode,
      })) || [];
  }

  initDictData();
</script>

<style>
  .jsoneditor-poweredBy,
  .jsoneditor-transform,
  .jsoneditor-repair,
  .jsoneditor-sort {
    display: none;
  }
</style>
